Topic: Add email and phone number plus icons to topbar

Tagged: x

Author

Posts

May 29, 2016 at 11:17 pm #1015984

Participant

I’m trying to add my email and phone number with email / phone icons to my top bar.

I want to align this to the right and make both of them clickable so when email clicked the person’s email client loads and when phone number is clicked on a mobile device the number is called.

I’ve done some research in other posts and came across this:

https://community.theme.co/forums/topic/add-email-button-to-top-bar-alongside-social-media-icons-integrity/

It seems to give me some of the instructions I need.

However, I can’t edit my child theme’s functions.php file.

Usually there is a link called “editor” in the “appearance” tab. However, it isn’t there for me.

How can I do what I want to do?

You’ll find my site login in the following post to verify that the editor link isn’t present.

Thanks.

May 29, 2016 at 11:17 pm #1015985

arefs

Participant

This reply has been marked as private.

May 30, 2016 at 12:18 am #1016020

Christopher

Moderator

Hi there,

You should connect to FTP account and navigate to wp-content/themes/x-child to access functions.php file.

Please add this code in functions.php file :

// Social Output
// =============================================================================

if ( ! function_exists( 'x_social_global' ) ) :
  function x_social_global() {

    $facebook    = x_get_option( 'x_social_facebook' );
    $twitter     = x_get_option( 'x_social_twitter' );
    $google_plus = x_get_option( 'x_social_googleplus' );
    $linkedin    = x_get_option( 'x_social_linkedin' );
    $xing        = x_get_option( 'x_social_xing' );
    $foursquare  = x_get_option( 'x_social_foursquare' );
    $youtube     = x_get_option( 'x_social_youtube' );
    $vimeo       = x_get_option( 'x_social_vimeo' );
    $instagram   = x_get_option( 'x_social_instagram' );
    $pinterest   = x_get_option( 'x_social_pinterest' );
    $dribbble    = x_get_option( 'x_social_dribbble' );
    $flickr      = x_get_option( 'x_social_flickr' );
    $github      = x_get_option( 'x_social_github' );
    $behance     = x_get_option( 'x_social_behance' );
    $tumblr      = x_get_option( 'x_social_tumblr' );
    $whatsapp    = x_get_option( 'x_social_whatsapp' );
    $soundcloud  = x_get_option( 'x_social_soundcloud' );
    $rss         = x_get_option( 'x_social_rss' );

    $output = '<div class="x-social-global">';

      if ( $facebook )    : $output .= '<a href="' . $facebook    . '" class="facebook" title="Facebook" target="_blank"><i class="x-icon-facebook-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $twitter )     : $output .= '<a href="' . $twitter     . '" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $google_plus ) : $output .= '<a href="' . $google_plus . '" class="google-plus" title="Google+" target="_blank"><i class="x-icon-google-plus-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $linkedin )    : $output .= '<a href="' . $linkedin    . '" class="linkedin" title="LinkedIn" target="_blank"><i class="x-icon-linkedin-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $xing )        : $output .= '<a href="' . $xing        . '" class="xing" title="XING" target="_blank"><i class="x-icon-xing-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $foursquare )  : $output .= '<a href="' . $foursquare  . '" class="foursquare" title="Foursquare" target="_blank"><i class="x-icon-foursquare" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $youtube )     : $output .= '<a href="' . $youtube     . '" class="youtube" title="YouTube" target="_blank"><i class="x-icon-youtube-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $vimeo )       : $output .= '<a href="' . $vimeo       . '" class="vimeo" title="Vimeo" target="_blank"><i class="x-icon-vimeo-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $instagram )   : $output .= '<a href="' . $instagram   . '" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $pinterest )   : $output .= '<a href="' . $pinterest   . '" class="pinterest" title="Pinterest" target="_blank"><i class="x-icon-pinterest-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $dribbble )    : $output .= '<a href="' . $dribbble    . '" class="dribbble" title="Dribbble" target="_blank"><i class="x-icon-dribbble" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $flickr )      : $output .= '<a href="' . $flickr      . '" class="flickr" title="Flickr" target="_blank"><i class="x-icon-flickr" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $github )      : $output .= '<a href="' . $github      . '" class="github" title="GitHub" target="_blank"><i class="x-icon-github-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $behance )     : $output .= '<a href="' . $behance     . '" class="behance" title="Behance" target="_blank"><i class="x-icon-behance-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $tumblr )      : $output .= '<a href="' . $tumblr      . '" class="tumblr" title="Tumblr" target="_blank"><i class="x-icon-tumblr-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $whatsapp )    : $output .= '<a href="' . $whatsapp    . '" class="tumblr" title="Whatsapp" target="_blank"><i class="x-icon-whatsapp" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $soundcloud )  : $output .= '<a href="' . $soundcloud  . '" class="soundcloud" title="SoundCloud" target="_blank"><i class="x-icon-soundcloud" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $rss )         : $output .= '<a href="' . $rss         . '" class="rss" title="RSS" target="_blank"><i class="x-icon-rss-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;

    // Main Icon Added
    $output .= '<a href="mailto:[email protected]" class="mail" title="Mail" target="_blank"><i class="x-icon-envelope"></i></a>';
    $output .= '</div>';

    echo $output;

  }
endif;

Hope it helps.

June 3, 2016 at 8:42 pm #1025044

arefs

Participant

Thanks.

Ive had the code, reupped the functions.php file to my child x theme. But the topbar isn’t displaying.

Is uploading it all I really need to do?

My site login is in post 2 if you need to take a look.

June 4, 2016 at 4:12 am #1025441

Nabeel A

Moderator

Hi again,

Would you mind providing us with FTP credentials so we can take a closer look?

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks!

June 5, 2016 at 4:08 am #1026416

arefs

Participant

This reply has been marked as private.

June 5, 2016 at 7:03 pm #1027027

Rad

Moderator

Hi there,

That could is only effective if your top bar and it’s social icons are enabled. I can’t confirm that since your admin login credentials are incorrect. Please check and let me know.

Thanks!

June 5, 2016 at 8:36 pm #1027187

arefs

Participant

This reply has been marked as private.

June 6, 2016 at 2:40 am #1027540

Christopher

Moderator

Hi there,

Please enable topbar from Customize -> Header -> MISCELLANEOUS.

Update your code in functions.php file to :

// Social Output
// =============================================================================

if ( ! function_exists( 'x_social_global' ) ) :
  function x_social_global() {

    $facebook    = x_get_option( 'x_social_facebook' );
    $twitter     = x_get_option( 'x_social_twitter' );
    $google_plus = x_get_option( 'x_social_googleplus' );
    $linkedin    = x_get_option( 'x_social_linkedin' );
    $xing        = x_get_option( 'x_social_xing' );
    $foursquare  = x_get_option( 'x_social_foursquare' );
    $youtube     = x_get_option( 'x_social_youtube' );
    $vimeo       = x_get_option( 'x_social_vimeo' );
    $instagram   = x_get_option( 'x_social_instagram' );
    $pinterest   = x_get_option( 'x_social_pinterest' );
    $dribbble    = x_get_option( 'x_social_dribbble' );
    $flickr      = x_get_option( 'x_social_flickr' );
    $github      = x_get_option( 'x_social_github' );
    $behance     = x_get_option( 'x_social_behance' );
    $tumblr      = x_get_option( 'x_social_tumblr' );
    $whatsapp    = x_get_option( 'x_social_whatsapp' );
    $soundcloud  = x_get_option( 'x_social_soundcloud' );
    $rss         = x_get_option( 'x_social_rss' );

    $output = '<div class="x-social-global">';

      if ( $facebook )    : $output .= '<a href="' . $facebook    . '" class="facebook" title="Facebook" target="_blank"><i class="x-icon-facebook-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $twitter )     : $output .= '<a href="' . $twitter     . '" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $google_plus ) : $output .= '<a href="' . $google_plus . '" class="google-plus" title="Google+" target="_blank"><i class="x-icon-google-plus-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $linkedin )    : $output .= '<a href="' . $linkedin    . '" class="linkedin" title="LinkedIn" target="_blank"><i class="x-icon-linkedin-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $xing )        : $output .= '<a href="' . $xing        . '" class="xing" title="XING" target="_blank"><i class="x-icon-xing-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $foursquare )  : $output .= '<a href="' . $foursquare  . '" class="foursquare" title="Foursquare" target="_blank"><i class="x-icon-foursquare" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $youtube )     : $output .= '<a href="' . $youtube     . '" class="youtube" title="YouTube" target="_blank"><i class="x-icon-youtube-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $vimeo )       : $output .= '<a href="' . $vimeo       . '" class="vimeo" title="Vimeo" target="_blank"><i class="x-icon-vimeo-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $instagram )   : $output .= '<a href="' . $instagram   . '" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $pinterest )   : $output .= '<a href="' . $pinterest   . '" class="pinterest" title="Pinterest" target="_blank"><i class="x-icon-pinterest-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $dribbble )    : $output .= '<a href="' . $dribbble    . '" class="dribbble" title="Dribbble" target="_blank"><i class="x-icon-dribbble" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $flickr )      : $output .= '<a href="' . $flickr      . '" class="flickr" title="Flickr" target="_blank"><i class="x-icon-flickr" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $github )      : $output .= '<a href="' . $github      . '" class="github" title="GitHub" target="_blank"><i class="x-icon-github-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $behance )     : $output .= '<a href="' . $behance     . '" class="behance" title="Behance" target="_blank"><i class="x-icon-behance-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $tumblr )      : $output .= '<a href="' . $tumblr      . '" class="tumblr" title="Tumblr" target="_blank"><i class="x-icon-tumblr-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $whatsapp )    : $output .= '<a href="' . $whatsapp    . '" class="tumblr" title="Whatsapp" target="_blank"><i class="x-icon-whatsapp" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $soundcloud )  : $output .= '<a href="' . $soundcloud  . '" class="soundcloud" title="SoundCloud" target="_blank"><i class="x-icon-soundcloud" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $rss )         : $output .= '<a href="' . $rss         . '" class="rss" title="RSS" target="_blank"><i class="x-icon-rss-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;

    // Main Icon Added
    $output .= '<a href="mailto:[email protected]" class="mail" title="Mail" target="_blank"><i class="x-icon-envelope" data-x-icon="" aria-hidden="true"></i></a>';
    $output .= '</div>';

    echo $output;

  }
endif;

Hope it helps.

June 7, 2016 at 1:48 am #1029387

arefs

Participant

OK, great. That gives me the email. But I also want to add the phone number plus icon.

Can you help?

Thanks.

June 7, 2016 at 5:46 am #1029675

Christopher

Moderator

Hi there,

You can add it directly to topbar area in customizer :

[x_icon type="phone"] 123456789

Hope it helps.

June 11, 2016 at 9:22 am #1037354

arefs

Participant

Unfortunately that doesn’t work.

I added the code to the topbar area like you said. But this was the result – https://dl.dropboxusercontent.com/u/17713251/2016-06-11_23-21-29.jpg

As you can see, the icon hasn’t rendered and it isn’t aligned to the right next to the mail icon like I mentioned in the OP.

Can you try again?

Thanks.

June 11, 2016 at 5:50 pm #1037651

Rad

Moderator

Hi there,

Topbar doesn’t support shortcode, instead, please add this

<i class="x-icon" data-x-icon=""></i> 123456789

Cheers!

June 12, 2016 at 5:00 pm #1038611

arefs

Participant

OK, thanks. We’re getting there.

But I direct you back to my original post:

“I’m trying to add my email and phone number with email / phone icons to my top bar.. I want to align this to the right and make both of them clickable so when email clicked the person’s email client loads and when phone number is clicked on a mobile device the number is called.”

How do I:

– align the phone icon to the right alongside the mail icon
– make the phone number clickable so when it is clicked on a mobile device the number is called.

Thanks.

June 13, 2016 at 12:54 am #1039063

Paul R

Moderator

Hi,

To achieve that, you can add this as your topbar content.

<i class="x-icon" data-x-icon=""></i> 123456789

Then add this in custom > css in the customizer.


.x-topbar .p-info {
    float: right;
    margin-left: 10px;
    line-height: 11px;
}

Hope that helps.

Author

Posts

1 2 →

<script> jQuery(function($){ $("#no-reply-1015984 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>